.orders-container {
  padding: 24px;
  min-height: 100%;

  // 统计卡片样式
  .stats-row {
    margin-bottom: 24px;
  }

  .stats-card {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:hover {
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
      transform: translateY(-2px);
    }

    .ant-statistic-title {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      margin-bottom: 8px;
    }

    .ant-statistic-content {
      font-size: 20px;
      font-weight: 500;
    }
  }

  .stats-card-highlight {
    background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
    
    .ant-statistic-title,
    .ant-statistic-content {
      color: white;
    }
  }

  // 主卡片样式
  .orders-card {
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
  }

  // 卡片标题栏
  .card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    h4 {
      margin-bottom: 0;
    }
  }

  // 筛选区域
  .filter-container {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  // 表格按钮样式
  .ant-btn-text {
    padding: 0 8px;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.03);
    }
  }
  
  // 订单分析样式
  .order-analytics {
    margin-top: 24px;
    
    .analytics-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      
      .ant-typography {
        margin-bottom: 0;
      }
      
      .time-filter {
        display: flex;
        align-items: center;
        
        @media (max-width: 768px) {
          margin-top: 16px;
          flex-wrap: wrap;
          
          .ant-radio-group {
            margin-top: 8px;
          }
        }
      }
    }
    
    .chart-tabs {
      margin-bottom: 8px;
    }
    
    .chart-container {
      margin-top: 16px;
    }
    
    .chart-card {
      border-radius: 4px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      margin-bottom: 24px;
      
      .ant-card-head {
        padding: 0 24px;
        border-bottom: 1px solid #f0f0f0;
      }
      
      .ant-card-head-title {
        padding: 16px 0;
        flex: 1;
      }
      
      .ant-card-extra {
        padding: 16px 0;
      }
    }
    
    .hot-courses-list {
      max-height: 300px;
      overflow-y: auto;
      padding-right: 8px;
      
      .hot-course-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .course-rank {
          display: flex;
          align-items: center;
          
          .rank-badge {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background-color: #f0f0f0;
            color: #666;
            font-size: 12px;
            margin-right: 8px;
            
            &.top-rank {
              background-color: #faad14;
              color: #fff;
              
              &:first-child {
                background-color: #ff4d4f;
              }
              
              &:nth-child(2) {
                background-color: #1890ff;
              }
            }
          }
          
          .course-name {
            max-width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        
        .course-data {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          
          .order-count {
            color: #666;
            font-size: 12px;
          }
          
          .amount {
            font-weight: 500;
            color: #333;
          }
        }
      }
    }
  }
}

// 全局动画
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// 响应式样式
@media (max-width: 1200px) {
  .orders-container {
    .stats-row {
      .ant-col {
        margin-bottom: 16px;
      }
    }
    
    .order-analytics {
      .analytics-header {
        flex-direction: column;
        align-items: flex-start;
      }
    }
  }
}

@media (max-width: 768px) {
  .orders-container {
    padding: 16px;
    
    .filter-container {
      flex-direction: column;
      gap: 12px;
      
      .ant-space {
        flex-wrap: wrap;
        gap: 12px;
        
        .ant-input-affix-wrapper,
        .ant-select,
        .ant-picker {
          width: 100% !important;
        }
      }
    }
  }
}